<template>
    <div class="member_page">
        <el-row style="padding:10px" >
            <el-button type="warning" @click="handleAdd">录入动物信息</el-button>
        </el-row>
        <Table
            :need-operation-area="isAdmin"
            :pSize="pageSize"
            :tPage="total"
            :table-model="tableModel"
            :table-data="tableData"
            :currentPage="currentPage"
            :needRemove="isAdmin"
            :needEdit="isAdmin"
            tableEditText="修改"
            tableDeletText="领养"
            @delet="handleDel"
            @edit="handleEdit"
            @changePage="handleChangePage"
            @handleSizeChange="handleSizeChange"
        />
        <el-dialog title="动物信息" :visible.sync="dialogTableVisible">
            <el-card class="box-card">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="姓名" prop="nickName">
                        <el-input  v-model="ruleForm.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="照片" prop="imgUrl">
                        <el-input  v-model="ruleForm.imgUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄(岁)" prop="age">
                        <el-input type="number" v-model.number="ruleForm.age" min="1"></el-input>
                    </el-form-item>
                    <el-form-item  label="身高(cm)" prop="height">
                        <el-input type="number" v-model.number="ruleForm.height" min="1"></el-input>
                    </el-form-item>
                    <el-form-item label="体重(kg)" prop="weight">
                        <el-input type="number" v-model.number="ruleForm.weight" min="1"></el-input>
                    </el-form-item>
                    <el-form-item label="健康状况" prop="health">
                        <el-radio-group v-model="ruleForm.health">
                            <el-radio :label="1">健康</el-radio>
                            <el-radio :label="2">受伤</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-dialog>
    </div>
</template>
<script>
import Table from "@/components/table.vue";
import { addNotice,updateNotice,delNotice,getNotice } from "@/api";
export default {
    name: "notice",
    components: {
        Table
    },
    data() {
        return {
            isAdmin: true,
            dialogTableVisible: false,
            tableModel: [
                { attribute: "nickName", dontSort: true, type: "normal", title: "姓名" },
                { attribute: "age", dontSort: true, type: "normal", title:"年龄(岁)" },
                { attribute: "height", dontSort: true, type: "normal", title: "身高(cm)"},
                { attribute: "weight", dontSort: true, type: "normal", title: "体重(kg)"},
                { attribute: "health", dontSort: true, type: "dict", title: "健康状况",dictList:[{code:1,dictName:'健康'},{code:2,dictName:'受伤'}]},
                { attribute: "isAdopt", dontSort: true, type: "normal", title: "是否领养"},
                { attribute: "datetime", dontSort: true, type: "normal", title: "领养时间"}
            ],
            tableData: [],
            total: 0,
            pageSize: 10,
            currentPage: 1,
            ruleForm: {
                age:0,
                health:1,
                height:0,
                weight:0
            },
            rules: {}
        };
    },
    created() {
        this.initTableData();
    },
    methods: {
      handleDel(row){
        this.$confirm('确认领养?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        const phone = JSON.parse(localStorage.getItem('userinfo')).phone
          delNotice({id:row.id,phone}).then(res=>{
              if(res.code==200){
                this.$message({
                  type: 'success',
                  message: '领养成功!'
                });
                this.initTableData();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      submitForm(){
        if(this.ruleForm.add==1){
          updateNotice(this.ruleForm).then(res=>{
            if(res.code==200){
              this.dialogTableVisible=false
              this.initTableData()
            }
          })
        }else{

          addNotice(this.ruleForm).then(res=>{
            if(res.code==200){
              this.dialogTableVisible=false
              this.initTableData()
            }
          })
        }
      },
      handleAdd(){
          this.ruleForm={}
          this.dialogTableVisible = true;
      },
        handleEdit(row) {
            this.ruleForm = row;
            this.ruleForm.add=1
            this.dialogTableVisible = true;
        },
        initTableData() {
            getNotice(this.currentPage).then(res => {
                if (res.code == 200 && res.data) {
                    this.tableData = res.data;
                    this.total = parseInt(res.msg);
                }
            });
        },
        // 当前页
        handleChangePage(page) {
            this.currentPage = page;
            this.initTableData();
        },
        // 每页显示多少
        handleSizeChange(limit) {
            this.pageSize = limit;
            this.initTableData();
        }
    }
};
</script>
<style lang="less">
.member_page {
    padding: 10px;
    .user_box {
        width: 100%;
        .item {
            width: 100%;
            height: 50px;
            box-sizing: border-box;
            display: flex;
            border-bottom: 1px dashed #efefef;
            .label {
                width: 30%;
                line-height: 50px;
            }
            .value {
                width: 70%;
                line-height: 50px;
                text-align: right;
            }
        }
    }
}
</style>
